<template>
    <div class="dashboard-container">
        <my-search :fields="fieldsList" :baseNumber="3" @onSearch="searchForm" @onReset="resetForm" />
        <div class="btn">
        </div>
        <div class="table-list" v-loading="loading">
            <!-- <my-table v-loading="loading" ref="myEltable" style="width: 100%" row-key="id" :showsummary="false" :columns="tableColumns" :tableData="tableDatas" :pageNum="queryObj.pageNo" :pageSize="queryObj.pageSize" :totalPage="total" :height="$store.state.app.windowHeight - 170" max-height="660px" :current="true" @onCurrentChange="changepageNo" @onPageSizeChange="changePageSize" highlight-current-row /> -->
            <Echart :id="myEchart" :option="option" :height="$store.state.app.windowHeight - 200 + 'px'" :width="'100%'" />
        </div>

    </div>
</template>

<script>
import { queryList } from '@/api/cxtj/qyssqsfx'
import Echart from '@/components/echart'
import {
    queryDetailList
} from '@/api/cxtj/zdsygl'
export default {
    name: 'Qxssqsfx',
    components: {
        Echart
    },

    data() {
        return {
            loading: false,
            fieldsList: [
                {
                    label: '纳税人名称',
                    field: 'qymc',
                    type: 'autocomplete',
                    value: '',
                    options: []
                },
                {
                    label: '纳税人识别号',
                    field: 'shxydm',
                    type: 'text',
                    value: ''
                },
                {
                    label: '年度',
                    field: 'nd',
                    type: 'year', // year
                    value: ''
                }

            ],

            tableDatas: []
            , queryObj: {
                qymc: '', //公司名称
                shxydm: '',
                nd: '',
            },
            option: {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        }
                    }
                },

                legend: {
                    data: ['税额', '增长率']
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                        axisPointer: {
                            type: 'shadow'
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '税额',


                        // interval: 50,
                        axisLabel: {
                            formatter: '{value} 万元'
                        }
                    },
                    {
                        type: 'value',
                        name: '增长率',
                        splitLine: {
                            show: false
                        },
                        // interval: 5,
                        axisLabel: {
                            formatter: '{value} %'
                        }
                    }
                ],
                series: [
                    {
                        name: '税额',
                        type: 'bar',
                        tooltip: {
                            valueFormatter: function (value) {
                                return value + ' 万元';
                            }
                        },
                        data: [

                        ]
                    },

                    {
                        name: '增长率',
                        type: 'line',
                        yAxisIndex: 1,
                        tooltip: {
                            valueFormatter: function (value) {
                                return value + ' %';
                            }
                        },
                        data: []
                    }
                ]
                , myEchart: ''
                , myEchart: ''
            },
            searchTxt: '',
            myEchart: ''

        }
    },
    watch: {
        fieldsList: {
            handler(newOption, oldOption) {
                console.log(newOption, oldOption)
                this.searchTxt = newOption[0].value
            },
            deep: true
        },
        searchTxt(newOption, oldOption) {
            console.log('1', newOption, oldOption)
            this.getQueryDetailList(newOption)
        }
    },
    mounted() {
    },
    methods: {
        getQueryDetailList(nsrmc) {
            queryDetailList({ nsrmc: nsrmc }).then(res => {
                if (res.code == 200) {
                    this.fieldsList[0].options = res.data.records.map(item => {
                        return { value: item.NSRMC, label: item.NSRMC }
                    })
                }
            })
        },
        initChart() {
        },
        searchForm(params) {
            console.log(params, '查询条件');
            this.queryObj.qymc = params.qymc || '';
            this.queryObj.nd = params.nd || '';
            this.queryObj.shxydm = params.shxydm || '';

            this.getTableData();
        },
        resetForm() {
            for (let key in this.queryObj) {
                this.queryObj[key] = '';
            }
            this.option.series[0].data = []
            this.option.series[1].data = []
            // this.getTableData();
        },
        getTableData() {
            if (this.queryObj.qymc == '' || this.queryObj.qymc == null) {
                this.$message.error('请输入纳税人名称！')
                return false;
            }
            if (this.queryObj.nd == '' || this.queryObj.nd == null) {
                this.$message.error('请选择年度！')
                return false;
            }
            this.loading = true
            queryList(this.queryObj).then(res => {
                console.log(res)
                this.loading = false
                if (res.code == 200) {
                    let sssr = []
                    let zzl = []
                    let month = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12']



                    for (let i = 0; i < month.length; i++)
                        for (let j in res.data.zzl) {
                            if (j == month[i]) {
                                if (res.data.zzl[j] == null) {
                                    zzl.push(0)
                                } else {
                                    zzl.push(res.data.zzl[j])
                                }

                            }

                        }
                    for (let i = 0; i < month.length; i++)
                        for (let j in res.data.sssr) {
                            if (j == month[i]) {
                                if (res.data.sssr[j] == null) {
                                    sssr.push(0)
                                } else {
                                    sssr.push(res.data.sssr[j])
                                }
                            }

                        }
                    console.log(zzl, sssr)

                    this.option.series[0].data = sssr
                    this.option.series[1].data = zzl
                }
            })
        },
        changepageNo(currPage) {
            this.queryObj.pageNo = currPage;
            this.getTableData();
        },
        changePageSize(pageSize) {
            this.queryObj.pageSize = pageSize;
            this.getTableData();
        },
    }
}
</script>

<style lang="scss" scoped>
.dashboard-container {
    height: 100%;
    width: 100%;
    background-color: #fff;
    padding: 8px;

    .btn {
        padding: 8px 8px 8px 0;
    }
}
</style>
